<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>メッセージングのサンプル</title>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

<script type="text/javascript">
  function myAlert(data) {
    alert("my alert " + data);
  }
  window.addEventListener("message", function(e) {
    alert("xdomain.html " + e.data);
  });
  var MYORIGIN = location.protocol + "//" + location.host;
  function init() {
    var iframe = document.getElementsByTagName("iframe")[0];
    var date = new Date();
    var dateStr = date.getFullYear() + "/" + (date.getMonth() + 1) + "/"
        + date.getDate() + " " + date.getHours() + ":" + date.getMinutes()
        + ":" + date.getSeconds();
    var number = Math.floor(Math.random() * 100);
    var json = '{date: "' + dateStr + '", number: "' + number + '"}';
    iframe.contentWindow.postMessage(json, "https://s3.amazonaws.com");
    document.getElementById("msg").innerHTML = dateStr + "," + number;
  }
  $(function() {
    $.ajax({
      url : "https://s3.amazonaws.com/xdomain/frame.html",
      success : function(data) {
        alert(data);
      }
    });
  });
</script>
<body>
	<div id="msg"></div>
	<button onclick="init()">click</button>
	<iframe src="https://s3.amazonaws.com/xdomain/frame.html" width="500"
		height="200"></iframe>
</body>
</html>
